<template>
  <div>
    <!--    头部-->
    <div>

      <el-menu
          class="el-menu-demo"
          mode="horizontal"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
         >
        <div style="display: flex; line-height: 60px; color: aliceblue">
          <img src="../../assets/logo.png" alt="" style="width: 20px; height: 20px; position: relative; top: 20px;">
          <div style="color: white; margin-left: 5px ;width: 200px">欢迎使用学生管理系统</div>
        <div style="flex:1">
        <el-menu-item index="1"  class="item"> <router-link to="/front/home" style="color: aliceblue;text-decoration:none">主页</router-link></el-menu-item>
        <el-submenu index="2" class="item">
          <template slot="title">工作操作</template>
          <el-menu-item index="2-1"><router-link to="/front/videos" style="color: aliceblue;text-decoration:none">观看视频</router-link></el-menu-item>
<!--          <el-menu-item index="2-1" :to="'/front/videos'">观看视频</el-menu-item>-->
          <el-menu-item index="2-2"><router-link to="/front/selectCourse" style="color: aliceblue;text-decoration:none">选课</router-link></el-menu-item>
          <el-menu-item index="2-3 "><router-link to="/front/article" style="color: aliceblue;text-decoration:none">评论</router-link></el-menu-item>
        </el-submenu>
        <el-menu-item index="3" class="item">
          <router-link to="/front/frontAbout" style="color: aliceblue;text-decoration: none">关于我们</router-link>
        </el-menu-item>
        <el-menu-item index="4" class="item">
          <router-link to="/front/moreInfo" style="color: aliceblue;text-decoration: none">了解更多</router-link>
        </el-menu-item>
        </div>
        <div style="width: 200px">
          <div v-if="!user.username" style="text-align: right ;padding-right: 30px">
            <el-button @click="$router.push('/login')">登录</el-button>
            <el-button @click="$router.push('/register')">注册</el-button>
          </div>
          <div v-else>
            <el-dropdown style="width: 200px; cursor: pointer; color: aliceblue; text-align: center"   >
              <span >{{ user.nickname }}</span><i class="el-icon-arrow-down" style="margin-right: 5px"></i>
              <img :src="user.avatarUrl" alt=""
                   style="width: 30px; border-radius: 50%; position: relative; top: 10px; right: 5px">

              <el-dropdown-menu slot="dropdown" style="width: 100px; text-align: center;" >
                <el-dropdown-item style="font-size: 14px; padding: 5px 0">
                  <router-link to="/front/frontPerson" style="text-decoration:none">个人信息</router-link>
                </el-dropdown-item>
                <el-dropdown-item  style="font-size: 14px; padding: 5px 0" >
                  <span @click="logout">退出</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>

        </div>
        </div>
      </el-menu>


    </div>

    <div style="width:1200px;margin: 0 auto ">
      <router-view  />
    </div>

  </div>

</template>
<script>

export default {
  name: "Front",
  data(){
    return{
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
    }
  },
  methods:{
    logout() {
      this.$store.commit("logout")
      this.$message.success("退出成功")
    }
  }
}
</script>

<style scoped>
.item{
  display: inline-block;
  /*right: 5px;*/
}

</style>